<template>
  <q-page class="row no-wrap library-page">
    <page-left-menu
      :title="$t('library.title')"
      class="page-menu"
      color="#E91E63"
      :menus="menus"
      @onChange="onMenuChange"
    />
    <q-scroll-area class="page-scroll q-pa-md bg-main">
      <div class="row fit justify-center items-center" v-if="currentUser">
        <router-view />
      </div>
      <guest-view v-else />
    </q-scroll-area>
  </q-page>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import PageLeftMenu from 'layouts/components/PageLeftMenu.vue';
import { PageLeftItem } from 'layouts/components/PageLeftItem';
import GuestView from 'pages/guests/Library.vue';
import { useUserStore } from 'src/stores/user-store';
import { useGlobalStore } from 'src/stores/global-store';
const themeColor = '#E91E63';
const userStore = useUserStore();
const globalStore = useGlobalStore();
const currentUser = computed(() => userStore.currentUser);
globalStore.setRightDrawerColor(themeColor);
const router = useRouter();
const menus = ref<PageLeftItem[]>([
  { label: 'library.saved', routeName: 'Saved' },
  { label: 'library.history', routeName: 'History' },
  { label: 'library.liked', routeName: 'Liked' },
  // { label: 'Bookmarked', routeName: 'Bookmarked' },
]);
async function onMenuChange(info: PageLeftItem) {
  await router.replace({ name: info.routeName });
}
</script>
<style lang="scss">
.library-page {
  .container {
    max-width: 1450px;
    min-width: 960px;
    width: 100%;
    .title {
      font-size: 22px;
    }
  }
}
</style>
